<template>
  <div class="repository-detail-container scroll-box">
    <div class="detail-title">{{ detail.title }}</div>
    <div class="detail-creator-date">
      创建人：{{ detail.create_name }}
      <span>|</span>
      更新时间：{{ detail.updated_time }}
    </div>
    <ul class="detail-info">
      <li>
        <p>知识代码</p>
        <p>{{ detail.id }}</p>
      </li>
      <li>
        <p>设备型号</p>
        <p>{{ detail.device_model_name }}</p>
      </li>
      <li>
        <p>知识分类</p>
        <p>{{ detail.category_name }}</p>
      </li>
    </ul>
    <!-- <div class="detail-download">
      <span>
        <i class="iconfont iconfujian"></i>
        {{ detail.file_name }}
      </span>
      <span>
        <i class="iconfont iconxiazai"></i>
        下载附件
      </span>
    </div> -->
    <div
      class="detail-content"
      v-html="detail.content"
    >
    </div>

    <ul class="imgs-box">
      <li
        v-for="(item, index) in detail.img_url"
        :key="index"
      >
        <img :src="item">
      </li>
    </ul>
  </div>
</template>

<script>
import { getKnowDetails } from '@/api/deviceManage.js';
export default {
  name: 'RepositoryDetail',
  data() {
    return {
      detail: {}
    };
  },
  created() {
    this.getKnowDetails();
  },
  methods: {
    // 获取知识详情
    getKnowDetails() {
      getKnowDetails({
        id: this.$route.query.id
      }).then(res => {
        this.detail = res.data;
        if (this.detail.img_url) {
          this.detail.img_url = JSON.parse(this.detail.img_url);
        } else {
          this.detail.img_url = [];
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.repository-detail-container {
  width: 100%;
  height: 100%;
  padding: 0.426667rem;
  background-color: #fff;

  .detail-title {
    margin-bottom: 0.32rem;
    font-size: 0.533333rem;
    text-align: center;
  }

  .detail-creator-date {
    margin-bottom: 0.32rem;
    color: var(--color-gray);
    font-size: 0.32rem;
    text-align: center;

    span {
      position: relative;
      top: -1px;
      margin: 0 0.16rem;
    }
  }

  .detail-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.426667rem;
    padding: 0.32rem;
    background-color: #fafafa;

    li {
      p {
        font-size: 0.32rem;
        &:first-of-type {
          margin-bottom: 0.213333rem;
          color: var(--color-gray);
        }
      }
    }
  }

  .detail-download {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.426667rem;

    span {
      &:first-of-type {
        font-size: 0.373333rem;

        i {
          font-size: 0.32rem;
          color: var(--color-gray);
        }
      }
      &:last-of-type {
        color: var(--color-primary);
        font-size: 0.32rem;

        i {
          font-size: 0.32rem;
        }
      }
    }
  }

  .detail-content {
    padding-top: 0.32rem;
    color: var(--color-deep-gray);
    font-size: 0.373333rem;
    border-top: 1px dashed #ebeef5;

    ::v-deep p {
      line-height: 0.533333rem;
    }

    ::v-deep span {
      line-height: 0.533333rem;
    }

    ::v-deep img {
      width: 100%;
      height: auto;
    }

    ::v-deep li {
      line-height: 0.533333rem;
    }
  }

  .imgs-box {
    width: 100%;

    li {
      width: 100%;
      margin-top: 0.213333rem;

      img {
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>